<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${classes['name']}+' - 班级详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
    <div data-th-replace="layout/common-hade-two"></div>
</head>
<body>

<div data-th-replace="layout/classes/common-layout-classes"></div>
<input hidden id="joined" th:value="${joined}">
<input hidden id="courseId" th:value="${classes['courseId']}">
<div class="mt20 pb10">
    <div class="mb20 pt10 pb10">
        <div class="container">
            <div class="row">

                <div class="col-sm-9">
                    <section class="c-info-tab">
                        <h4 class="active" data-order="0"><span class="fs16 c-333">全部话题</span></h4>
                        <h4 data-order="1"><span class="fs16 c-333">最新</span></h4>
                        <h4 data-order="2"><span class="fs16 c-333">最热</span></h4>
                    </section>

                    <div class="mt20 pt10" id="topic-list">

                        <div class="text-center pt10 pb10">
                            <span class="loading"></span>
                        </div>

                        <!--无数据 tips-->
                        <section class="no-data__wrap hide">
                            <span class="no-data-ico"></span>
                            <p class="mt20"><span class="c-666">还没有班级话题~~~</span></p>
                        </section>

                        <div class="pt10 pb10 text-center class-slide-more__wrap hide">
                            <button type="button" class="btn btn-block btn-default">加载更多</button>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="mb20 pt10">
                        <section class="class-bCard__wrap">
                            <div class="class-bCard-face">
                                <img th:attr="data-original=${classes['imageMap']['pcUrlMap']['small']}" width="100" height="100" class="lazy img-circle">
                            </div>
                            <h4 class="hLh30 txtOf text-center"><span class="c-333" th:text="${classes['name']}"></span></h4>
                            <section class="cm-desc-txt__twoLine text-center">
                                <span class="c-999 fs12" th:text="${classes['summary']}"></span>
                            </section>
                            <section class="mt10 text-center">
                                <button class="btn btn-danger btn-rounded btn-outline" type="button" th:disabled="not ${joined} or ${classes['status']} == 2" id="classes-topic-publish">发表话题</button>
                                <button th:if="${classes['status']} == 2" class="btn btn-default btn-rounded" type="button" disabled> 已停班</button>
                                <button th:if="${joined} and ${classes['status'] == 1}" class="btn btn-default btn-rounded" type="button" disabled>+ 已加入</button>
                                <button th:if="not ${joined} and ${classes['status'] == 1} and ${classes['full'] == 1} " class="btn btn-default btn-rounded" type="button" disabled>去加入其它</button>
                                <button th:if="not ${joined} and ${classes['status'] == 1} and ${classes['full'] == 2}" class="btn btn-danger btn-rounded" type="button" id="classes-join"> + 加入</button>
                            </section>
                            <hr>
                            <section class="pb10 text-center">
                                <span class="fs12 c-333"><b th:text="${classes['topicCount']}"></b>个话题</span>
                                <span class="fs12 c-333">·</span>
                                <span class="fs12 c-333"><b th:text="${classes['studentCount']}"></b>位同学</span>
                            </section>
                        </section>

                        <section class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">班级话题分类</span></h6>
                                <hr>
                            </section>
                            <div class="question-tags-list mt20">
                                <span class="question-tag" th:each="classify : ${topicTypeNum}">
                                    <button class="btn btn-default btn-rounded btn-outline" type="button">
                                        <span  class="classifyText" th:text="${classify['name']}"></span>
                                        <small class="ml5 c-666" th:text="${classify['num']}"></small>
                                    </button>
                                </span>
                            </div>
                        </section>
                        <section th:if="${classes['course']} != null" class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">班级关联课程</span></h6>
                                <hr>
                            </section>
                            <div class="media">
                                <a th:href=" @{/web/course/courseInfo?courseId={id}(id=${classes['course']['id']})}" target="_blank">
                                <div class="media-left">
                                        <img th:attr="data-original=${classes['course']['imageMap']['pcUrlMap']['medium']}" width="100" class="lazy">
                                </div>
                                <div class="media-body">
                                <div class="sc-item-title">
                                    <span  th:text="${classes['course']['courseName']}" class="c-333 fs14"></span>
                                </div>
                                </div>
                                </a>
                            </div>
                        </section>

                        <section class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">班级成员</span></h6>
                                <hr>
                            </section>
                            <div class="mt10">
                                <div class="carousel slide carousel-class-member__wrap" id="carousel-class-member">
                                    <div class="carousel-inner">
                                        <span class="no-data__wrap" hidden>
                                            <span class="no-data-ico"></span>
                                            <p class="mt20"><span class="c-666">还没有班级成员~~~</span></p>
                                        </span>
                                    </div>
                                    <a title="上一组" hidden data-slide="prev" href="#carousel-class-member" class="left carousel-control">
                                        <span class="fa fa-chevron-left"></span>
                                    </a>
                                    <a title="下一组" hidden data-slide="next" href="#carousel-class-member" class="right carousel-control">
                                        <span class="fa fa-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                        </section>

                        <section class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">APP下载</span></h6>
                                <hr>
                            </section>
                            <div class="mt10">
                                <section class="media">
                                    <section class="media-left">
                                        <img th:src="${appDowMap['url']}" width="92" height="92" alt="app扫码下载">
                                    </section>
                                    <section class="media-body">
                                        <h6><b class="fs3" th:text="${infoMap['author']}"><i class="fa fa-angle-right"></i></b></h6>
                                        <span class="fs12 c-ccc" th:text="${#strings.abbreviate(infoMap['description'],43)}" th:title="${infoMap['description']}"></span>
                                    </section>
                                </section>
                            </div>
                        </section>

                        <section class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">H5&微信</span></h6>
                                <hr>
                            </section>
                            <div class="mt10">
                                <section class="media">
                                    <section class="media-left">
                                        <img th:src="${h5MobileMap['url']}" width="92" height="92" alt="H5&微信">
                                    </section>
                                    <section class="media-body">
                                        <h6><b class="fs3" th:text="${infoMap['author']}"><i class="fa fa-angle-right"></i></b></h6>
                                        <span class="fs12 c-ccc" th:text="${#strings.abbreviate(infoMap['description'],43)}" th:title="${infoMap['description']}"></span>
                                    </section>
                                </section>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input hidden id="id" th:value="${classes['id']}" />
<input hidden id="requestURL" th:value="${requestURL}" />

<div data-th-replace="layout/footer"></div>
<script type="text/javascript" th:src="@{{path}/front/web/business/classes/classes.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/classes/join-classes.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/classes/info/classes-info.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>